<template>
        <!-- 添加和搜索 -->
    <div class="search_add"> 
        <div width="176px">
            <el-button type="primary" size="large" @click="addrole">添加</el-button> 
            <el-button type="danger" size="large" @click="delRoleL" :disabled="roleIdData.roleIdL.length===0">批量删除</el-button>  
        </div> 
        <el-form inline width="400px">
            <el-form-item  style="width: 220px;">
                <el-input v-model="searchObj.roleName" placeholder="查询角色"  size="large"></el-input>
            </el-form-item>
            <el-button type="primary" size="large" @click="queryRole">查询</el-button>
            <el-button size="large" @click="emptyRole">重置</el-button> 
        </el-form>
    </div> 
        <!-- 列表  -->
    <el-table  
    :data="rStore.roleListData?.items || []"
    border stripe 
    :header-cell-style="{background:'#eee'}" 
    :highlight-current-row="true" 
    :resizable="false"
    @selection-change="handleSelectionChange"
    >
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column prop="roleName" label="角色名称"  align="center"/> 
        <el-table-column label="操作" align="center">
            <template #default="scope" >
                <el-button type="success" size="small" @click="distribution(scope.row)">权限分配</el-button>
                <el-button type="primary" size="small" @click="amend(scope.row)">修改</el-button>
                <el-button type="danger" size="small" @click="delRole(scope.row)">删除</el-button> 
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页器   -->
   <el-pagination
        :current-page="pagination.page"
        :page-size="pagination.limit"
        :total="rStore.roleListData?.total || null"
        :page-sizes="[1,5, 10, 20, 50, 100]"
        style="padding: 20px 0;"
        layout="prev, pager, next, jumper, ->, sizes, total"
        @current-change="getRoleList"
        @size-change="handleSizeChange" 
    />    
</template>

<script setup lang='ts'>
    import {ref,reactive} from 'vue'
    import {useRouter} from 'vue-router'  
    import { ElMessage, ElMessageBox } from 'element-plus'
    import { addRole , delRoleList , amendRole , delTheRole} from '@/api'
    import {roleStore} from '@/store/role' 
    const router = useRouter()
    const rStore = roleStore()

    const pagination = reactive({
        page: 1, // 当前页码 
        limit: 10, // 每页数量
        total: 0, // 总数量  
    })
    // 搜索
    const searchObj = reactive({
        roleName:'',// 搜索
    })
    const roleIdData = reactive({
        roleIdL:[],
    })
    // 角色列表
    function getRoleList (pagea?:number){
        pagination.page = pagea==null ? pagination.page:pagea
        const { limit,page } = pagination;   
        rStore.roleList( page,limit,{...searchObj})  
    }
    getRoleList(1)
    // 分页条数监听
    function handleSizeChange (pageSize:number) {
        pagination.limit = pageSize 
        getRoleList(1)
    }
    // 添加
    function addrole(){
        ElMessageBox.prompt('添加角色', '设置角色', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',  
        inputPattern:/^.{1,}$/,
        inputErrorMessage:'不能为空',
        })
        .then(({ value }) => { 
            let valueName = value.trim()
            if (!valueName) {
                ElMessage.error('输入不合法!') 
                return false
            }
            addRole({roleName:value}).then((res) => {
                if (res.code==2000)  ElMessage.success('添加角色成功!')
                getRoleList(1)
            }).catch((err) => {
                console.log(err); 
            }); 
        })
        .catch(() => {
            ElMessage.info('取消了添加角色!')
        })
    }
    // 批量删除
    function handleSelectionChange(selection){
        roleIdData.roleIdL = selection.map(item => item.id)
    }
    function delRoleL(){
        ElMessageBox.confirm('确定删除这批角色吗?','批量删除', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(() => {
            delRoleList(roleIdData.roleIdL).then((res) => {
                if (res.code==20000) ElMessage.success('成功批量删除角色!')
                getRoleList(1)
            }).catch((err) => {
                ElMessage.error(err)
            }); 
        })
        .catch(() => {
            ElMessage.info('取消批量删除!')
        })
    }
    // 搜索
    function queryRole(){
        let rolename = searchObj.roleName.trim()
        if (rolename) getRoleList(1)
    }
    // 重置 
    function emptyRole(){
        searchObj.roleName = ''
        getRoleList(1)
    }
    // 修改
    function amend(row){
        ElMessageBox.prompt('修改角色', '设置角色', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',  
        inputPattern:/^.{1,}$/,
        inputErrorMessage:'不能为空', 
        inputValue:row.roleName,
        })
        .then(({ value }) => {  
            let valueName = value.trim()
            if (!valueName) {
                ElMessage.error('输入不合法!') 
                return false
            }
            amendRole({roleName:value,id:row.id}).then((res) => {
                if (res.code==2000)  ElMessage.success('修改角色成功!')
                getRoleList(1)
            }).catch((err) => {
                console.log(err); 
            }); 
        })
        .catch(() => {
            ElMessage.info('取消了修改角色!')
        })
    }
    // 删除
    function delRole(row){
        ElMessageBox.confirm('确定删除这个角色吗?','删除角色', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(() => {
            delTheRole(row.id).then((res) => {
                if (res.code==20000) ElMessage.success('成功删除角色!')
                getRoleList(1)
            }).catch((err) => {
                ElMessage.error(err)
            }); 
        })
        .catch(() => {
            ElMessage.info('取消删除!')
        })
    }
    // 权限分配
    function distribution(row){
        // router.push(`/jurisdiction/auth?id=${row.id}&name=${row.roleName}`)
        router.push({ path: 'auth', query: { id:<string>row.id,name:row.roleName }}) 
        
        
    }
</script>

<style lang='less' scoped>
    .search_add{
        width: 100%;
        height: 50px;
        display: flex;
        margin: 20px auto;
        justify-content:space-between;
        padding: 0 20px; 
        .el-form-item{
            margin-bottom: 0;
        } 
    }
</style>